<script setup lang="ts">
import { useCurrentStudentInfoStore } from '@/stores/modules/useCurrentStudentInfoStore'

const studentInfoStore = useCurrentStudentInfoStore()
</script>

<template>
  <view class="header">
    <view class="user-info">
      <view class="avatar">
        <image src="@/static/images/avatar.png" mode="aspectFill" />
        <view v-if="false" class="badge">
          Lv.3
        </view>
      </view>
      <view class="info-right">
        <text class="name">
          {{ studentInfoStore.studentName }}
        </text>
        <view class="streak">
          <uv-icon name="checkmark-circle" color="#2979ff" />
          <text class="ml-4">
            连续3天完成打卡
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.header {
    background: linear-gradient(to right, #ffffff, #f5f7ff);
    padding: 40rpx 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .user-info {
        display: flex;
        align-items: center;

        .avatar {
            position: relative;
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            overflow: hidden;
            border: 4rpx solid #ffffff;
            box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.1);

            image {
                width: 100%;
                height: 100%;
            }

            .badge {
                position: absolute;
                bottom: -2rpx;
                left: 50%;
                transform: translateX(-50%);
                background: #2979ff;
                color: #ffffff;
                font-size: 20rpx;
                padding: 4rpx 12rpx;
                border-radius: 12rpx;
                border: 2rpx solid #ffffff;
            }
        }

        .info-right {
            margin-left: 24rpx;

            .name {
                font-size: 36rpx;
                font-weight: 600;
                color: #333;
            }

            .streak {
                display: flex;
                align-items: center;
                margin-top: 12rpx;
                font-size: 24rpx;
                color: #666;
                background: rgba(41, 121, 255, 0.1);
                padding: 6rpx 16rpx;
                border-radius: 20rpx;
            }
        }
    }
}
</style>
